<!-- 评论列表组件 -->
<template>
  <!-- :immediate-check="false"，关闭他的立即检查 -->
  <van-list
    v-model="loading"
    :finished="finished"
    :error.sync="error"
    error-text="请求失败，点击重新加载"
    :immediate-check="false"
    finished-text="没有更多了"
    @load="onLoad"
  >
    <!-- 评论每一项的组件挂载点 -->
    <CommentItem
      v-for="(item,i) in list"
      :key="i"
      :comment="item"
      @reply-click="$emit('reply-click', $event)"
    ></CommentItem>
    <!-- <van-cell
      v-for="(item,i) in list"
      :key="i"
      :title="item.content"
    /> -->
  </van-list>
</template>

<script>
import { getComments } from '@/api/comment'
import CommentItem from './comment-item'
export default {
  // 组件名称
  name: '',
  // 局部注册的组件
  components: {
    CommentItem
  },
  // 组件参数 接收来自父组件的数据
  props: {
    source: {
      type: [Number, String, Object],
      required: true
    },
    list: {
      type: Array,
      default: () => []
    },
    // 增加type参数，默认值为a，取值范围只能是a或者c
    // 用于区分是对文章的评论还是对评论的回复
    type: {
      type: String,
      // 自定义 Prop 数据验证
      validator (value) {
        // 规定传入的内容
        return ['a', 'c'].includes(value)
      },
      default: 'a'// 给他个默认值
    }
  },
  // 组件状态值
  data () {
    return {
      // list: [], // 存放评论的数组
      loading: false, // 请求状态
      finished: false, // 评论是否加载完毕，如果加载完毕则改为true
      offset: null, // 获取下一页数据的标记
      limit: 10, // 每次请求获取的条数
      error: false // 报错组件是否显示
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成,属性已绑定,但DOM还未生成,el属性还不存在
  */
  created () {
    // 我们手动开启loading
    this.loading = true
    // 页面一加载就获取评论数量
    this.onLoad()
  },
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted () { },
  // 组件方法
  methods: {
    async onLoad () {
      try {
        // 调用父组件的自定义方法，并且把所有的评论对应的数据传递过去
        this.$emit('commentlist', this.list)
        // 获取评论对应的数据
        const { data } = await getComments({
          type: this.type, //  评论类型，a-对文章(article)的评论，c-对评论(comment)的回复
          // 为了解决他自己toString他自己会把引号拼接上，所以我们手动给他toString一下
          source: this.source.toString(), // 源id，文章id或评论id(特别注意：需要手动加上toString()，否则会在source的值两边加上双引号，导致id不是一个有效的整形)
          offset: this.offset, // 获取评论数据的偏移量，值为评论id，表示从此id的数据向后取，不传表示从第一页开始读取数据
          limit: this.limit // 获取的评论数据个数，不传表示采用后端服务设定的默认每页数据量
        })
        // 把获取的数据追加到数组里面
        const { results } = data.data
        console.log(data.data)
        this.list.push(...results)
        // 调用父组件的方法，并且把获取到的品论的所有相关内容传递过去
        this.$emit('onload-success', data.data)
        // 把请求状态关闭，为了好进行下一次请求
        this.loading = false // 3. 将 loading 设置为 false
        // 判断数组里面是否有内容
        if (results.length) {
          // 有则给起传递评论的Id，实现获取下一页品论的效果
          this.offset = data.data.last_id
        } else {
          // 没有就将 finished 设置结束
          this.finished = true
        }
      } catch (err) {
        // 请求发生错误的时候显示
        this.error = true
        // 同样把请求状态关闭，为了下一次请求
        this.loading = false
      }
    }
  }

}
</script>
<style scoped lang="less">
</style>
